<style scoped>
  .login {
    width: 100%;
    min-height: 660px;
    /*background-image: url('https://file.iviewui.com/iview-admin/login_bg.jpg');*/
    /*background: rgba(205,205,205,0.6);*/
    background-size: cover;
    background-position: center;
    position: relative;
  }
  .login-con{
    position: absolute;
    left: 26%;
    top: 396px;
    transform: translateY(-60%);
    width: 460px;
  }
  .login-header{
    font-size: 16px;
    font-weight: 300;
    text-align: center;
    padding: 30px 0;
  }
  .form-con{
    padding: 10px 0;
  }
  .login-tip{
    font-size: 10px;
    text-align: center;
    color: #c3c3c3;
  }

</style>

<template>
  <div class="login">
    <div class="login-con">
      <Card :bordered="false">
        <p slot="title">
          <Icon type="log-in"></Icon>
          注册用户
        </p>
        <div class="form-con">
          <Form ref="loginForm" :model="form" :rules="rules">
            <FormItem prop="userName" label="用户名">
              <Input v-model="form.userName" :placeholder="$t('login.account')" name="userName">
              </Input>
            </FormItem>
            <FormItem prop="password" label="邮箱">
              <Input type="email" v-model="form.password" :placeholder="$t('login.password')" name="password">
              </Input>
            </FormItem>
            <FormItem prop="password" label="手机号">
              <Input type="email" v-model="form.password" :placeholder="$t('login.password')" name="password">
              </Input>
            </FormItem>
            <FormItem prop="password" label="密码">
              <Input type="password" v-model="form.password" :placeholder="$t('login.password')" name="password">
              </Input>
            </FormItem>
            <FormItem prop="verify">
              <Input type="text" v-model="form.verify" :placeholder="$t('login.verification')" style="width: 70%;" name="verify">
              <span slot="prepend">
                <Icon :size="14" type="at"></Icon>
              </span>
              </Input>
              <img alt="" :src=imgsrc @click="newVerify" style="width:28%;float: right;margin-top: -32px;height: 32px;"/>
            </FormItem>
            <FormItem>
              <i-button @click="handleSubmit" type="primary" long :loading="loginLoading">注 册</i-button>
            </FormItem>
          </Form>
        </div>
      </Card>
    </div>
  </div>
</template>
<script>
  let Base64 = require('js-base64').Base64;
  export default {
    data () {
      return {
        form: {
          userName: '',
          password: '',
          verify:''
        },
        rules: {
          userName: [
            { required: true, message: this.$t('login.account'), trigger: 'blur' }
          ],
          password: [
            { required: true, message: this.$t('login.password'), trigger: 'blur' }
          ],
          verify: [
            { required: true, message: this.$t('login.verification'), trigger: 'blur' }
          ]
        },
        imgsrc: "",
        loginLoading:false
      };
    },
    methods: {
      newVerify(){
        this.imgsrc = this.$log+'validateCodeServlet?tm='+ Math.random();
      },
      handleSubmit () {
        this.$refs.loginForm.validate(() => {
          var username = this.form.userName
          var pass = this.form.password
          var verify = this.form.verify
          if((username != '') && (pass != '') && (verify != '')){
            this.loginLoading = true;
            /*this.$http({
              url:this.$log+'login.do',
              method:'POST',
              headers: {
                'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
              },
              data:'username='+username+'&password='+Base64.encode(pass)+'&validate='+verify
            }).then((response)=>{
              // console.log(response)
              var code = response.data.code
              // console.log(response)
              if(code == 0){
                // console.log(response)
                var users = response.data.user;
                var allways = users.allways
                // console.log(allways)
                if((allways == null) || (allways.size == 0)){
                  this.$Message.error(this.$t('login.noauth'))
                }else{
                  // 登录验证
                  var username_orders = Base64.encode('username_orders')
                  var dd = Base64.encode('dd')
                  var review = Base64.encode('review')
                  var access_orders = Base64.encode('access_orders')
                  window.sessionStorage.setItem(username_orders, Base64.encode(users.username));
                  window.sessionStorage.setItem(dd, Base64.encode(users.uid))
                  // 验证用户部门，如果是业务部，订单显示不同
                  localStorage.setItem(review, users.deId)         // 用户部门
                  window.sessionStorage.setItem(access_orders, Base64.encode(allways));
                  // 刷新-》菜单的自动更新
                  this.$store.commit('updateMenulist');
                  this.$router.push({
                    name: 'home_index',
                    path: '/index'
                  });
                }
                this.loginLoading = false
              }else{
                this.$Message.error(response.data.errors)
                this.loginLoading = false
              }

            })*/
          }else{
            if(username == ''){
              this.$Message.error(this.$t('login.account'))
            }else if(pass == ''){
              this.$Message.error(this.$t('login.password'))
            }else if(verify == ''){
              this.$Message.error(this.$t('login.verification'))
            }
          }

        });
      }
    },
    created(){
      // 验证码直接请求
      this.newVerify()
    }
  };
</script>

